
import React, { Component } from 'react';
import { Actions } from 'react-native-router-flux'
import {
  StyleSheet,
  View,
  Text,
  Image,
  TouchableOpacity,
    ImageBackground,
    Modal,
    Alert
} from 'react-native';
import Colors from '../../assets/colors'

/**
 *
  * @param props
 * @returns {*} 签名显示组件
 * @constructor
 */
const SignaturePreview = props => {

  return (
    <View style={styles.imgContainer}>
        <TouchableOpacity onPressIn={() =>{props.thisPressIn(props.url,props.signWordType)}}
                          onPressOut={() =>{props.thisPressOut(props.url,props.signWordType)}}>
            <ImageBackground source={{uri: props.url}} style={{width: 250, height: 130,justifyContent:'center',alignItems:'center'}}>
                {/*<View style={{width: 230, height: 130,justifyContent:'center',alignItems:'center',backgroundColor:Colors.unselectGrayBg}}>*/}
                    {/*<TouchableOpacity onPress={() =>{props.cleanSign(props.url,props.signWordType)}}>*/}
                        {/*<Image source={require('../../assets/icons/lajitongcolor.png')} style={{width: 30, height: 30} }/>*/}
                    {/*</TouchableOpacity>*/}
                {/*</View>*/}
            </ImageBackground>
        </TouchableOpacity>
    </View>
  )
}


/**
 *
 * @param props
 * @returns {*} 添加签名组件
 * @constructor
 */
const AddSignature = props => {
  return (
    <TouchableOpacity
      onPress={() => Actions.push('Signature', {signWordType: props.type,signWordAction:props.photoAction})}>
      <View style={styles.imgContainer}>
        <Image source={require('../../assets/icons/add.png')} style={{width: 90, height: 90}}/>
      </View>
    </TouchableOpacity>
  )
}

export default class App extends Component<{}> {
  render() {

    const {signWordType, signWordAction,cleanSign,thisPhotoClose,thisAlertClose,
        imgUrl,thisOpen,thisPressIn,thisPressOut,thisAlertOpen,deleteImg,deleteType} = this.props
    let imgs = [];
    if (signWordType == 'signInSignature') {
      imgs = this.props.signInSignature
    } else if (signWordType == 'signOutSignature') {
      imgs = this.props.signOutSignature
    } else if (signWordType == 'SGSignature') {
      imgs = this.props.SGSignature
    } else if (signWordType == 'JSSignature') {
      imgs = this.props.JSSignature
    } else if (signWordType == 'JLSignature') {
      imgs = this.props.JLSignature
    } else if (signWordType == 'JDSignature') {
      imgs = this.props.JDSignature
    } else if (signWordType == 'KCSignature') {
      imgs = this.props.KCSignature
    } else if (signWordType == 'SJSignature') {
      imgs = this.props.SJSignature
    } else if (signWordType == 'JCSignature') {
      imgs = this.props.JCSignature
    }
    return (
      <View style={styles.container}>

        {
          imgs.map((val, index) =>
            <SignaturePreview cleanSign={cleanSign}
                              thisPressIn={thisPressIn}
                              thisPressOut={thisPressOut}
                              signWordType={signWordType} key={index} url={val.url}/>
          )
        }

        <AddSignature type={signWordType} photoAction={signWordAction}/>

          <View>
              <Modal
                  animationType='fade'
                  onRequestClose={()=> this.onRequestClose()}
                  visible={thisOpen}
              >
                  <View style={{ flex: 1,margin:20,borderRadius:6}}>
                      <TouchableOpacity onPress={ () =>{thisPhotoClose()}}>
                          <Image source={{uri:imgUrl}} style={{width:'100%',height:'100%',borderRadius:6}} />
                          <View style={styles.container}>
                              <Text style={{color:'white'}}>X</Text>
                          </View>
                      </TouchableOpacity>
                  </View>
              </Modal>
          </View>
          <View>
            <Modal
              animationType='fade'
              onRequestClose={()=> this.onRequestClose()}
              visible={thisAlertOpen}
              transparent={true}
            >
                <View style={styles.mainView}>
                  <View style={styles.dialogView}>
                    <View style={styles.dialogTitle}>
                      <Text style={{fontSize:25}}>温馨提示</Text>
                    </View>
                    <View style={styles.dialogCenter}>
                      <Text style={{fontSize:18}}>您确定删除此签名？</Text>
                    </View>
                    <View style={styles.dialogBottom}>
                      <View style={{width:'50%',justifyContent: 'center',alignItems: 'center',borderRightWidth:1,borderRightColor:'white'}}>
                        <TouchableOpacity style={{backgroundColor:Colors.dataBlueBg,width:'100%',height:'100%',borderBottomLeftRadius:6,
                          justifyContent: 'center',alignItems: 'center'}}
                                          onPress={() =>{thisAlertClose()}}>
                          <View >
                            <Text style={{fontSize:18,color:Colors.btnPrimaryBg}}>取消</Text>
                          </View>
                        </TouchableOpacity>
                      </View>

                      <View style={{width:'50%',justifyContent: 'center',alignItems: 'center',}}>
                        <TouchableOpacity style={{backgroundColor:Colors.dataBlueBg,width:'100%',height:'100%',borderBottomRightRadius:6,
                          justifyContent: 'center',alignItems: 'center'}}
                                          onPress={() =>{cleanSign()}}>
                          <View >
                            <Text style={{fontSize:18,color:Colors.btnPrimaryBg}}>确定</Text>
                          </View>
                        </TouchableOpacity>
                      </View>
                    </View>
                  </View>
                </View>
            </Modal>
          </View>


      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.backgroundLightGray,
    alignItems: 'center',
    padding: 10,
    flexDirection: 'row',
    justifyContent: 'center',
    flexWrap: 'wrap',
  },
  imgContainer: {
    marginTop: 10,
    backgroundColor: '#fff',
    width: 250,
    height: 150,
    marginRight: 20,
    borderRadius: 5,
    alignItems: 'center',
    justifyContent: 'center',
  },
  thisClose: {
    left: 10,
    justifyContent: 'flex-start',
    backgroundColor:'red',
    width:20,
    height:20,
    paddingLeft:6,
    borderRadius:10
  },
  mainView:{
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(52,52,52,0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  dialogView:{
    // width:'40%',
    // height:'40%',
    marginLeft:'20%',
    marginRight:'20%'
  },
  dialogTitle:{
    backgroundColor:Colors.backgroundLightGray,
    justifyContent: 'center',
    alignItems: 'center',
    borderTopLeftRadius:6,
    borderTopRightRadius:6,
    height:50,
  },
  dialogCenter:{
    backgroundColor:'white',
    justifyContent: 'center',
    alignItems: 'center',
    height:150,
  },
  dialogBottom:{
    backgroundColor:Colors.dataBlueBg,
    justifyContent: 'center',
    // alignItems: 'center',
    borderBottomLeftRadius:6,
    borderBottomRightRadius:6,
    height:50,
    flexDirection: 'row',
    // flex:1
  },
});